<template>
  <div id="AnswerView">
    <!-- 头部 -->
    <!-- <v-header></v-header> -->
    <!-- 左边导航 -->
    <div class="AnswerView-nav">
      <div class="AnswerView-btn">
        <button @click="dialogSearchisible = true"><i class="el-icon-search"></i>搜索</button>
      </div>
      <div class="AnswerView-title">
        <div class="AnswerView-title-box">{{title}}</div>
        <el-tree :data="data"
                 :props="defaultProps"
                 ref="treeBox"
                 accordion
                 lazy
                 highlight-current
                 node-key="gid"
                 :default-expanded-keys='aaa'
                 :current-node-key='bbb'
                 :load="loadFun"
                 @node-click="handleNodeClick">
                 <span class="span-ellipsis" slot-scope={node,data}>
                   <span :title="data.goods_name">{{data.goods_name}}</span>
                 </span>
        </el-tree>

      </div>
    </div>
    <!-- 右边页面 -->
    <div class="AnswerView-content">
      <!-- 交卷 -->
      <div class="AnswerView-content-btn">
        <button @click="click_test_paper"
                class="AnswerView-btn1"><i class="el-icon-document"></i>现在交卷</button>
        <button class="AnswerView-btn2"
                @click="clear_local">清空重做</button>
        <p>亲，该试卷做完请点击交卷额，系统才会记录错题</p>
      </div>
      <!-- 题目 -->
      <div class="AnswerView-ti-block">
        <div class="ti-block-content">
          <p style="white-space: pre-wrap;">{{testArr[testNum]?testNum + 1+'、': ''}}{{testArr[testNum]?testArr[testNum].title: ''}}</p>
          <div class="ti-block-content-img"
               v-show="testArr[testNum]?(testArr[testNum].title_img.length !== 0?true:false):false">
            <template v-for="(item, index) in testArr[testNum]?testArr[testNum].title_img:[]">
              <img :src="baseUrl+item"
                   :key="index"
                   alt="">
            </template>

          </div>
          <div>
            <div class="answer-img" v-if="testArr[testNum]?(testArr[testNum].all_img.length !== 0?true:false):false">
              <template v-for="(item, index) in testArr[testNum]?testArr[testNum].all_img:[]">
                <img :src="baseUrl+item" :key="index" alt="">
              </template>
            </div>
            <div v-else>
              <p v-if="testArr[testNum]?testArr[testNum].A:false">A . {{testArr[testNum]?testArr[testNum].A:''}}</p>
              <div class="ti-block-content-img"
                  v-show="testArr[testNum]?(testArr[testNum].A_img.length !== 0?true:false):false">
                <template v-for="(item, index) in testArr[testNum]?testArr[testNum].A_img:[]">
                  <img :src="baseUrl+item"
                      :key="index"
                      alt="">
                </template>
              </div>
              <p v-if="testArr[testNum]?testArr[testNum].B:false">B . {{testArr[testNum]?testArr[testNum].B:''}}</p>
              <div class="ti-block-content-img"
                  v-show="testArr[testNum]?(testArr[testNum].B_img.length !== 0?true:false):false">
                <template v-for="(item, index) in testArr[testNum]?testArr[testNum].B_img:[]">
                  <img :src="baseUrl+item"
                      :key="index"
                      alt="">
                </template>
              </div>
              <p v-if="testArr[testNum]?testArr[testNum].C:false">C . {{testArr[testNum]?testArr[testNum].C:''}}</p>
              <div class="ti-block-content-img"
                  v-show="testArr[testNum]?(testArr[testNum].C_img.length !== 0?true:false):false">
                <template v-for="(item, index) in testArr[testNum]?testArr[testNum].C_img:[]">
                  <img :src="baseUrl+item"
                      :key="index"
                      alt="">
                </template>
              </div>
              <p v-if="testArr[testNum]?testArr[testNum].D:false">D . {{testArr[testNum]?testArr[testNum].D:''}}</p>
              <div class="ti-block-content-img"
                  v-show="testArr[testNum]?(testArr[testNum].D_img.length !== 0?true:false):false">
                <template v-for="(item, index) in testArr[testNum]?testArr[testNum].D_img:[]">
                  <img :src="baseUrl+item"
                      :key="index"
                      alt="">
                </template>
              </div>
              <p v-if="testArr[testNum]?testArr[testNum].E:false">E . {{testArr[testNum]?testArr[testNum].E:''}}</p>
              <div class="ti-block-content-img"
                  v-show="testArr[testNum]?(testArr[testNum].E_img.length !== 0?true:false):false">
                <template v-for="(item, index) in testArr[testNum]?testArr[testNum].E_img:[]">
                  <img :src="baseUrl+item"
                      :key="index"
                      alt="">
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="ti-block-sel"
             v-if="testArr[testNum]&&testArr[testNum].type === 'one'">
          请选择答案
          <el-radio v-model="radio"
                    label="A">A</el-radio>
          <el-radio v-model="radio"
                    label="B">B</el-radio>
          <el-radio v-model="radio"
                    v-if="testArr[testNum]?testArr[testNum].C:false"
                    label="C">C</el-radio>
          <el-radio v-model="radio"
                    v-if="testArr[testNum]?testArr[testNum].D:false"
                    label="D">D</el-radio>
        </div>
        <div class="ti-block-sel"
             v-if="testArr[testNum]?testArr[testNum].type === 'question' || testArr[testNum].type === 'indefinite' : '' " >
          请选择答案
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="A"></el-checkbox>
            <el-checkbox label="B"></el-checkbox>
            <el-checkbox v-if="testArr[testNum]?testArr[testNum].C:false"
                         label="C"></el-checkbox>
            <el-checkbox v-if="testArr[testNum]?testArr[testNum].D:false"
                         label="D"></el-checkbox>
            <el-checkbox v-if="testArr[testNum]?testArr[testNum].E:false"
                         label="E"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="ti-block-sel"
             v-if="testArr[testNum]&&testArr[testNum].type === 'judge'">
          请选择答案
          <el-radio v-model="radio"
                    label="A">A</el-radio>
          <el-radio v-model="radio"
                    label="B">B</el-radio>
        </div>
        <div class="ti-block-sel"
             v-if="testArr[testNum]?testArr[testNum].type === 'brief' || testArr[testNum].type === 'pack':'' ">
          请选择答案
          <span>本题不支持作答，请自行作答后核对答案并查看解析</span>

        </div>
        <div class="ti-block-action">
          <button @click="click_answer_comment">{{answerComment}}</button>
          <button @click="click_redo">重做</button>
          <button @click="dialogNoteVisible = true">笔记</button>
          <button @click="click_collection">{{collection?'取消收藏':'收藏'}}</button>
          <button @click="dialogFormVisible = true">评论</button>
          <button @click="dialogErrVisible = true">纠错</button>
        </div>
        <div class="ti-block-answer">
          <div class="answer"
               v-show="answerShow">
            <p style="white-space: pre-wrap;">
              <span>【正确答案】</span>
              <template v-for="(item, index) in (testArr[testNum]?testArr[testNum].answer:[])">
                <span :key="index">{{item}}&nbsp;&nbsp;</span>
              </template>
            </p>
            <div class="answer-img"
                 v-show="testArr[testNum]?(testArr[testNum].answer_img.length !== 0?true:false):false">
              <template v-for="(item, index) in testArr[testNum]?testArr[testNum].answer_img:[]">
                <img :src="baseUrl+item"
                     :key="index"
                     alt="">
              </template>
            </div>
            <p style="white-space: pre-wrap;">【答案解析】<span>{{testArr[testNum]?testArr[testNum].analysis[0]:'暂无解析'}}</span></p>
            <div class="answer-img"
                 v-show="testArr[testNum]?(testArr[testNum].analysis_img.length !== 0?true:false):false">
              <template v-for="(item, index) in testArr[testNum]?testArr[testNum].analysis_img:[]">
                <img :src="baseUrl+item"
                     :key="index"
                     alt="">
              </template>
            </div>
          </div>
          <div class="comment"
               v-show="commentShow">
            <p>【全部评论】</p>
            <template v-for="(item, index) in discuss">
              <div class="comment-item"
                   :key="index">
                <img src="../assets/img/header.png"
                     alt="">
                <div>
                  <span>{{item.nike_name?item.nike_name:mobile}}</span>
                  <p>{{item.content?item.content: '无评论'}}</p>
                </div>
                <p class="comment-item-date">{{item.create_time?item.create_time:'刚刚'}}</p>
              </div>
            </template>

          </div>
        </div>
      </div>
      <!-- 完成数量 -->
      <div class="AnswerView-ti-num">
        <button class="btn1"
                @click="next_test(-1)">上一题</button>
        <button class="btn2"
                @click="next_test(1)">下一题</button>
        <span>总题数：{{testArr.length}}题</span>
        <span>已完成：{{overTest}}题</span>
        <span>未完成：{{testArr.length-overTest}}题</span>
        <span class="red">错误</span>
        <span class="green">正确</span>
      </div>
      <!-- 题目小框 -->
      <div class="AnswerView-ti-span">
        <span v-for="(item,index) in testArr"
              :key="index"
              :class="[item.isErr?(item.isErr === 1? 'green-bg': 'red-bg'): '', index === testNum? 'border' : '']"
              @click="click_test(index)">{{index + 1}}</span>
      </div>
    </div>
    <!-- 页尾 -->
    <!-- <v-footer></v-footer> -->
    <!-- 打分  -->
    <el-dialog title="打分"
               :visible.sync="dialogVisible"
               width="30%">
      <div class="dialog-title">再接再厉哦~</div>
      <div class="dialog-grade">
        <p>总分：{{dialogData.max}}</p>
        <p>得分：{{dialogData.mark}}</p>
      </div>
      <div class="dislog-num">
        <p>试卷总题数：{{dialogData.num}}</p>
        <p>已做题总数：{{dialogData.all}}</p>
        <p>未做题总数：{{dialogData.done}}</p>
      </div>
      <div class="dislog-num">
        <p>答对题数：{{dialogData.success}}</p>
        <p>答错题数：{{dialogData.error}}</p>
        <p>正确率：{{dialogData.CorrectRate}}</p>
      </div>
      <div class="dislog-btn">
        <button @click="jump_allAnalysis">全部解析</button>
        <button @click="jump_analysis_err">错题解析</button>
      </div>
    </el-dialog>
    <!-- 评论的弹窗 -->
    <el-dialog title="评论"
               :visible.sync="dialogFormVisible"
               width="30%">
      <el-input v-model="form.content"
                type="textarea"
                :autosize="{ minRows: 4}"
                placeholder="请输入反馈内容"
                auto-complete="off"></el-input>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="click_add_comment">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 笔记的弹窗 -->
    <el-dialog title="笔记"
               :visible.sync="dialogNoteVisible"
               width="30%">
      <el-input v-model="noteFrom.content"
                type="textarea"
                :autosize="{ minRows: 4}"
                placeholder="请输入笔记内容"
                auto-complete="off"></el-input>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogNoteVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="add_note">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 纠错的弹窗 -->
    <el-dialog title="错误描述"
               :visible.sync="dialogErrVisible"
               width="30%">
      <el-form :model="errForm">
        <el-form-item>
          <el-input v-model="errForm.name"
                    type="textarea"
                    :autosize="{ minRows: 4}"
                    placeholder="请输入错误内容"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="错误类型"
                      class="aaa">
        </el-form-item>
        <el-form-item>
          <el-select v-model="errForm.region"
                     placeholder="请选择错误类型">
            <el-option label="题干有误"
                       value="1"></el-option>
            <el-option label="答案有误"
                       value="2"></el-option>
            <el-option label="答案解析有误"
                       value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogErrVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="click_err">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 历史纪录弹窗 -->
    <el-dialog class="history_box"
               title="检测到您的历史纪录"
               :visible.sync="dialogHistoryVisible"
               width="30%">
      <div class="historyBtn">
        <button class="btn1">继续做题</button>
        <button class="btn2">做题记录</button>
        <button class="btn3">清空重做</button>
      </div>
    </el-dialog>
    <!-- 选择模式的弹窗 -->
    <el-dialog class="history_box"
               title="选择模式"
               :visible.sync="dialogSelectionVisible"
               width="30%">
      <div class="historyBtn">
        <button class="btn1">考试模式</button>
        <button class="btn2">练习模式</button>
      </div>
    </el-dialog>
    <!-- 搜索的弹窗 -->
    <el-dialog class="search-box"
               title="试题搜索......"
               :visible.sync="dialogSearchisible">
      <div class="search-sou">
        <input type="text"
               v-model="searchStr"
               placeholder="以权责发生制为核算基础">
        <button @click="search_test"><i class="el-icon-search"></i>搜索</button>
      </div>
      <div class="search-table">
        <el-table :data="searchTableData"
                  border
                  highlight-current-row
                  style="width: 100%"
                  @current-change="searchCurrentChange">
          <el-table-column prop="title"
                           show-overflow-tooltip
                           label="题目">
          </el-table-column>
          <el-table-column prop="goods_name"
                           label="所属试卷"
                           show-overflow-tooltip
                           width="170">
          </el-table-column>
          <el-table-column prop="type"
                           label="题型"
                           width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 'judge'">判断题</span>
              <span v-else-if="scope.row.type === 'question'">多选题</span>
              <span v-else-if="scope.row.type === 'brief'">简答题</span>
              <span v-else-if="scope.row.type === 'one'">单选题</span>
              <span v-else>填空题</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time"
                           label="答题日期"
                           width="170">
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogSearchisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="jump_search">打开试题</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '../api/utils.js'
import { Promise } from 'q'
import baseUrl from '../api/setBaseUrl.js'

export default {
  inject: ['reload'],
  name: 'AnswerView',
  components: {},
  props: ['title', 'testId'],
  data () {
    return {
      aaa: [],
      bbb: null,
      // 接口地址
      url: '',
      mobile: '',
      // 打分的弹窗
      dialogVisible: false,
      dialogData: '', // 打分的数据
      // 评论的弹窗
      dialogFormVisible: false,
      form: {
        content: ''
      },
      // 笔记的弹窗
      dialogNoteVisible: false,
      noteFrom: {
        content: ''
      },
      oldNote: false, // 判断以前有没有笔记
      // 纠错的弹窗
      dialogErrVisible: false,
      errForm: {
        name: '',
        region: ''
      },
      // 历史纪录的弹窗
      dialogHistoryVisible: false,
      // 模式选择的弹窗
      dialogSelectionVisible: false,
      // 搜索的弹窗
      dialogSearchisible: false,
      searchStr: '',
      // 树形导航
      data: [],
      // 默认选中
      // resourceCheckedKey: [91],
      defaultProps: {
        children: 'children',
        label: 'goods_name'
      },
      // promise的模拟
      data1: [],
      // 搜索弹窗表格数据
      searchTableData: [],
      // 答案单选
      radio: '',
      // 答案多选
      checkList: [],
      // 检测点击重复的子导航
      selectId: '',
      // 装试题的数组
      testArr: [],
      // 当前所在的试题
      testNum: 0,
      // 完成的答题
      overTest: 0,
      // 答案显示
      answerShow: false,
      // 评论显示
      commentShow: false,
      // 答案评论的切换按钮
      answerComment: '显示答案',
      // 是否收藏的数据
      collection: false,
      // 试题评论
      discuss: '',
      // 搜索的某道题的试卷
      searchTest: '',
      // 图片地址
      baseUrl: baseUrl
    }
  },
  created () {
    if (this.$store.state.ppid !== null) {
      this.aaa = [this.$store.state.ppid]
      // this.$store.state.ppid = null
    }
    if (this.$store.state.ccid !== null) {
      // console.log(this.$store.state.ccid)
      this.bbb = this.$store.state.ccid
      this.$store.state.ccid = null
    }
  },
  /* cid 93 pid 91 qid 33680 */

  computed: {},

  watch: {
    testNum (newValue, oldValue) {
      // 监听变化时获取笔记
      this.oldNote = false
      this.$http.note({
        phone: localStorage.getItem('mobile'),
        type: this.testArr[newValue].type,
        qid: this.testArr[newValue].qid,
        custom_extend: 1
      }).then((res) => {
        // console.log('笔记1', res)
        this.noteFrom = res.data.data
        this.oldNote = true
      }).catch((err) => {
        console.log(err)
        this.noteFrom = { contetn: '' }
      })
      // 获取题目是否收藏
      this.$http.comment({
        phone: localStorage.getItem('mobile'),
        type: this.testArr[newValue].type,
        qid: this.testArr[newValue].qid,
        custom_extend: 1
      }).then((res) => {
        // console.log(res)
        this.collection = res.data.data
      }).catch((err) => {
        console.log(err)
      })
      // 获取题目评论 第一题
      this.$http.getComment({
        phone: localStorage.getItem('mobile'),
        type: this.testArr[newValue].type,
        qid: this.testArr[newValue].qid,
        custom_extend: 1
      }).then((res) => {
        this.discuss = res.data.data
      }).catch((err) => {
        console.log(err)
        this.discuss = []
      })
    }
  },

  mounted () {
    this.url = JSON.parse(localStorage.getItem('customData')).url
    this.mobile = localStorage.getItem('mobile')

    /* 给导航赋值 */
    let promiseItem = new Promise((resolve, reject) => {
      this.$http.questionBank({
        id: localStorage.getItem('gid'),
        phone: localStorage.getItem('mobile')
      }).then((res) => {
        // console.log('525', res)
        this.data = res.data.data
        resolve(res.data.data)
      }).catch((err) => {
        console.log(err)
      })
    })

    promiseItem.then((res) => {
      return new Promise((resolve, reject) => {
        // 进入时的初始化
        // console.log('ppid', this.$store.state.ppid)
        this.$http.course({
          // id: res[0].gid,
          id: this.$store.state.ppid || res[0].gid,
          phone: localStorage.getItem('mobile')
        }).then(res1 => {
          // console.log('525', res1)
          this.data1 = res1.data.data
          resolve(res1.data.data)
        }).catch((err) => {
          console.log(err)
        })
      })
    }).then((res) => {
      return new Promise((resolve, reject) => {
        if (this.$store.state.testId) {
          console.log('进入最近学习')
          this.selectId = this.$store.state.testId
          this.$http.app({
            phone: localStorage.getItem('mobile'),
            id: this.$store.state.testId
          }).then((res2) => {
            this.$store.state.testId = ''
            /* 初始化检测有无历史记录 */
            if (localStorage.getItem(this.selectId) && JSON.parse(localStorage.getItem(this.selectId)).length !== 0) {
              let res2date = res2.data.data
              let hisData = JSON.parse(localStorage.getItem(this.selectId))
              for (let item of hisData) {
                // console.log(item)
                for (let i of res2date) {
                  if (item.his_qid === i.qid) {
                    i.isErr = item.his_isErr
                    i.oldSelect = item.his_oldSelect
                  }
                }
              }
              console.log('this.testNum', this.testNum)
              this.testNum = hisData[0].his_testNum
              this.testArr = res2date
            } else {
              this.testArr = res2.data.data
            }

            resolve(res2.data.data)
          }).catch((err) => {
            console.log(err)
          })
        } else if (this.bbb) {
          console.log('进入正确')
          this.selectId = this.bbb
          this.$http.app({
            phone: localStorage.getItem('mobile'),
            id: this.bbb
          }).then((res2) => {
            // console.log('app3', res2)
            /* 初始化检测有无历史记录 */
            if (localStorage.getItem(this.selectId) && JSON.parse(localStorage.getItem(this.selectId)).length !== 0) {
              let res2date = res2.data.data
              let hisData = JSON.parse(localStorage.getItem(this.selectId))
              for (let item of hisData) {
                // console.log(item)
                for (let i of res2date) {
                  if (item.his_qid === i.qid) {
                    i.isErr = item.his_isErr
                    i.oldSelect = item.his_oldSelect
                  }
                }
              }
              if (this.$store.state.qqid !== null) {
                for (let item in res2.data.data) {
                  if (res2.data.data[item].qid === this.$store.state.qqid) {
                    this.testNum = Number(item)
                  }
                }
                this.$store.state.qqid = null
              }
              this.testArr = res2date
            } else {
              // this.testArr = res2.data.data
              if (this.$store.state.qqid !== null) {
                for (let item in res2.data.data) {
                  if (res2.data.data[item].qid === this.$store.state.qqid) {
                    this.testNum = Number(item)
                  }
                }
                this.$store.state.qqid = null
              }
              this.testArr = res2.data.data
            }

            resolve(res2.data.data)
          }).catch((err) => {
            console.log(err)
          })
        } else {
          console.log('进入没有值')
          this.selectId = res[0].gid
          this.$http.app({
            phone: localStorage.getItem('mobile'),
            id: res[0].gid
          }).then((res2) => {
            // console.log('app4', res2)
            /* 初始化检测有无历史记录 */
            if (localStorage.getItem(this.selectId) && JSON.parse(localStorage.getItem(this.selectId)).length !== 0) {
              let res2date = res2.data.data
              let hisData = JSON.parse(localStorage.getItem(this.selectId))
              for (let item of hisData) {
                // console.log(item)
                for (let i of res2date) {
                  if (item.his_qid === i.qid) {
                    i.isErr = item.his_isErr
                    i.oldSelect = item.his_oldSelect
                  }
                }
              }
              this.testNum = hisData[0].his_testNum
              this.testArr = res2date
              console.log(this.testArr)
            } else {
              this.testArr = res2.data.data
            }
            resolve(res2.data.data)
          }).catch((err) => {
            console.log(err)
          })
        }
      })
    }).then((res) => {
      return new Promise((resolve, reject) => {
        // console.log(res)
        // console.log(this.testNum)
        // 获取笔记 第一题
        this.$http.note({
          phone: localStorage.getItem('mobile'),
          type: res[this.testNum].type,
          qid: res[this.testNum].qid,
          custom_extend: 1
        }).then((res) => {
          // console.log('笔记2', res)
          this.noteFrom = res.data.data
          this.oldNote = true
        }).catch((err) => {
          console.log(err)
          this.noteFrom = { contetn: '' }
        })
        // 获取题目是否收藏 第一题
        this.$http.comment({
          phone: localStorage.getItem('mobile'),
          type: res[this.testNum].type,
          qid: res[this.testNum].qid,
          custom_extend: 1
        }).then((res) => {
          // console.log(res)
          this.collection = res.data.data
        }).catch((err) => {
          console.log(err)
        })
        // 获取题目评论 第一题
        this.$http.getComment({
          phone: localStorage.getItem('mobile'),
          type: res[this.testNum].type,
          qid: res[this.testNum].qid,
          custom_extend: 1
        }).then((res) => {
          this.discuss = res.data.data
        }).catch((err) => {
          console.log(err)
        })
      })
    })
  },

  methods: {
    // 树形导航
    handleNodeClick (data) {
      // console.log('1', data.gid)
      this.judge_state = false
      if (data.gid !== this.selectId) {
        this.selectId = data.gid
        for (let item of this.data) {
        // console.log(item)
          if (item.gid === this.selectId) {
            this.judge_state = true
            this.$store.state.ppid = item.gid
          }
        }
        if (!this.judge_state) {
          this.$store.state.ccid = data.gid
        }
        if (data.testTime) {
          // console.log(123, this.checkList)
          this.checkList = []
          this.radio = ''
          this.$http.app({
            phone: localStorage.getItem('mobile'),
            id: data.gid,
            custom_extend: '1'
          }).then((res) => {
            // console.log('app1', res)
            this.testNum = 0
            /* 初始化检测有无历史记录 */
            if (localStorage.getItem(this.selectId) && JSON.parse(localStorage.getItem(this.selectId)).length !== 0) {
              let res2date = res.data.data
              let hisData = JSON.parse(localStorage.getItem(this.selectId))
              for (let item of hisData) {
                // console.log(item)
                for (let i of res2date) {
                  if (item.his_qid === i.qid) {
                    i.isErr = item.his_isErr
                    i.oldSelect = item.his_oldSelect
                  }
                }
              }
              this.testNum = hisData[0].his_testNum
              this.testArr = res2date
            } else {
              this.testArr = res.data.data
            }

            // 初始化获取笔记
            this.$http.note({
              phone: localStorage.getItem('mobile'),
              type: res.data.data[0].type,
              qid: res.data.data[0].qid,
              custom_extend: 1
            }).then((res1) => {
              // console.log('笔记3', res1)
              this.noteFrom = res1.data.data
              this.oldNote = true
            }).catch((err) => {
              console.log(err)
              this.noteFrom = { contetn: '' }
            })
          }).catch((err) => {
            console.log(err)
          })
        }
      }
    },
    // 懒加载时触发
    loadFun (node, resolve) {
      if (node.level === 0) {
        return resolve([])
      }
      if (node.level > 1) return resolve([])
      if (node.level === 1) { // 二级节点
        this.getChildrenNode(node, resolve)
      }
    },
    // 二级节点
    getChildrenNode (node, resolve) {
      // console.log(123)
      let categoryId = node.data.gid
      this.$http.course({
        id: categoryId,
        phone: localStorage.getItem('mobile')
      }).then(res => {
        // console.log(res)
        let childrenList = res.data.data
        if (childrenList.length === 0) {
          this.$message.error('数据拉取失败，请刷新再试！')
          return false
        } else {
          for (let item of childrenList) {
            item.goods_name = `${item.goods_name}(${item.sign}/${item.num})`
          }
          // 显示当前选中高亮
          // if (this.$store.state.testId) {
          //   // this.resourceCheckedKey = [123]
          // this.$nextTick(() => {
          //   this.$refs.treeBox.setCurrentKey(this.$store.state.testId) // treeBox 元素的ref   value 绑定的node-key
          // })
          // }
        }
        resolve(childrenList)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 上一题、下一题
    next_test (num) {
      // 切换试题
      if ((this.testNum + num) < 0 || (this.testNum + num) === this.testArr.length) {
        this.$message({
          message: '到头了~~',
          type: 'warning'
        })
        this.judge_answer()
        // this.old_answer()
        return false
      } else {
        this.judge_answer()
        // this.old_answer()
        this.testNum = this.testNum + num
        console.log('aaa', this.testArr[this.testNum])
        if (this.testArr[this.testNum].isErr) {
          this.answerShow = true
          this.answerComment = '显示评论'
        } else {
          this.answerShow = false
          this.answerComment = '显示答案'
        }
        // 隐藏答案与评论
        this.commentShow = false
      }
      // console.log(this.testArr[this.testNum + num].isErr)
      if (this.testArr[this.testNum].isErr) {
        // console.log(this.testArr[this.testNum].oldSelect)
        // 分别判断不同类型的答案 单选和判断
        if (this.testArr[this.testNum].type === 'one' || this.testArr[this.testNum].type === 'judge') {
          this.radio = this.testArr[this.testNum].oldSelect[0]
        }
        // 分别判断不同类型的答案 多选
        if (this.testArr[this.testNum].type === 'question' || this.testArr[this.testNum].type === 'indefinite') {
          this.checkList = this.testArr[this.testNum].oldSelect
        }
      }
    },
    // 点击题目
    click_test (num) {
      this.judge_answer()
      this.testNum = num
      this.old_answer(num)
      // 隐藏答案与评论
      if (this.testArr[this.testNum].isErr) {
        this.answerShow = true
        this.answerComment = '显示评论'
      } else {
        this.answerShow = false
        this.answerComment = '显示答案'
      }
      this.commentShow = false
    },
    // 返回答完的题时，有答过的答案
    old_answer (num) {
      // console.log(this.testArr[num].isErr)
      if (this.testArr[num].isErr) {
        // 分别判断不同类型的答案 单选和判断
        if (this.testArr[num].type === 'one' || this.testArr[num].type === 'judge') {
          this.radio = this.testArr[num].oldSelect[0]
        }
        // 分别判断不同类型的答案 多选
        if (this.testArr[num].type === 'question' || this.testArr[num].type === 'indefinite') {
          this.checkList = this.testArr[num].oldSelect
        }
      } else {
        // console.log('undefined')
        this.checkList = []
        this.radio = ''
      }
    },
    // 判断答案
    judge_answer () {
      // 分别判断不同类型的答案 单选和判断
      if (this.testArr[this.testNum].type === 'one' || this.testArr[this.testNum].type === 'judge') {
        if (this.radio) {
          let radioArr = [this.radio]
          let radioS = util.equar(radioArr, this.testArr[this.testNum].answer)
          this.testArr[this.testNum].oldSelect = radioArr
          if (radioS) {
            this.testArr[this.testNum].isErr = 1
          } else {
            this.testArr[this.testNum].isErr = 2
          }
          this.radio = ''
          this.overTest += 1
        }
      }
      // 分别判断不同类型的答案 多选
      if (this.testArr[this.testNum].type === 'question' || this.testArr[this.testNum].type === 'indefinite') {
        // console.log(this.checkList)
        if (this.checkList.length !== 0) {
          this.testArr[this.testNum].oldSelect = this.checkList
          let checkS = util.equar(this.checkList, this.testArr[this.testNum].answer)
          if (checkS) {
            this.testArr[this.testNum].isErr = 1
          } else {
            this.testArr[this.testNum].isErr = 2
          }
          this.checkList = []
          this.overTest += 1
        }
      }
      // 分别判断不同类型的答案 简答题
      if (this.testArr[this.testNum].type === 'brief' || this.testArr[this.testNum].type === 'pack') {
        // console.log(this.checkList)
        this.testArr[this.testNum].isErr = 1
      }
    },
    // 切换答案和评论的点击事件
    click_answer_comment () {
      if (!this.answerShow) {
        this.answerShow = true
        this.commentShow = false
        this.answerComment = '显示评论'
      } else {
        this.answerShow = false
        this.commentShow = true
        this.answerComment = '显示答案'
      }
    },
    // 点击重做
    click_redo () {
      // console.log(this.testArr[this.testNum])
      if (this.testArr[this.testNum].isErr) {
        this.$set(this.testArr[this.testNum], 'isErr', null)
        this.$set(this.testArr[this.testNum], 'oldSelect', [])
        this.checkList = []
        this.radio = ''
      } else {
        this.checkList = []
        this.radio = ''
      }
    },
    // 添加/修改笔记
    add_note () {
      this.dialogNoteVisible = false
      if (this.oldNote) {
        // 修改笔记
        this.$http.editNote({
          phone: localStorage.getItem('mobile'),
          id: this.noteFrom.nid,
          content: this.noteFrom.content
        }).then((res) => {
          console.log(res)
          this.$message({
            message: '修改笔记成功',
            type: 'success'
          })
        }).catch((err) => {
          console.log(err)
        })
      } else {
        // 新增笔记
        this.$http.addNote({
          phone: localStorage.getItem('mobile'),
          type: this.testArr[this.testNum].type,
          qid: this.testArr[this.testNum].qid,
          content: this.noteFrom.content
        }).then((res) => {
          console.log(res)
          this.$message({
            message: '保存笔记成功',
            type: 'success'
          })
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    // 点击收藏
    click_collection () {
      if (this.collection) { // 取消收藏
        this.$http.delCollect({
          phone: localStorage.getItem('mobile'),
          type: this.testArr[this.testNum].type,
          qid: this.testArr[this.testNum].qid
        }).then((res) => {
          console.log(res)
          this.collection = false
          this.$message({
            message: '取消收藏',
            type: 'success'
          })
        }).catch((err) => {
          console.log(err)
        })
      } else { // 收藏
        this.$http.collect({
          phone: localStorage.getItem('mobile'),
          type: this.testArr[this.testNum].type,
          qid: this.testArr[this.testNum].qid
        }).then((res) => {
          console.log(res)
          this.collection = true
          this.$message({
            message: '收藏成功',
            type: 'success'
          })
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    // 添加评论
    click_add_comment () {
      this.dialogFormVisible = false
      this.$http.addComment({
        phone: localStorage.getItem('mobile'),
        type: this.testArr[this.testNum].type,
        qid: this.testArr[this.testNum].qid,
        content: this.form.content
      }).then((res) => {
        console.log(res)
        // 刚刚评论的push进数组
        console.log(this.discuss)
        this.discuss.push({
          content: this.form.content,
          create_time: '',
          header_img: '',
          nike_name: ''
        })
        console.log(this.discuss)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 点击纠错
    click_err () {
      this.dialogErrVisible = false
      if (this.errForm.name) {
        this.$http.addComment({
          phone: localStorage.getItem('mobile'),
          type: this.testArr[this.testNum].type,
          qid: this.testArr[this.testNum].qid,
          content: '(错题反馈)' + this.errForm.name
        }).then((res) => {
          // console.log(res)
          this.$message({
            message: '上传错误成功',
            type: 'success'
          })
          // 刚刚评论的push进数组
        }).catch((err) => {
          console.log(err)
        })
      } else {
        this.$message({
          message: '请填写错误内容',
          type: 'warning'
        })
      }
    },
    // 现在交卷
    click_test_paper () {
      // console.log('950', this.testArr)
      this.judge_answer()
      let answerArr = []
      // 历史记录的数组
      let historyArr = []
      let signStr = 0
      for (let index in this.testArr) {
        // console.log(this.testArr[index])
        if (this.testArr[index].isErr === 1 || this.testArr[index].isErr === 2) {
          /* 需要存入本地的数据-----------------
           @this.selectId 当前课程
           @this.testNum 当前题目 */
          historyArr.push({
            his_qid: this.testArr[index].qid,
            his_oldSelect: this.testArr[index].oldSelect,
            his_isErr: this.testArr[index].isErr,
            his_testNum: this.testNum
          })
          signStr = Number(index) + 1
          if (this.testArr[index].type === 'question' || this.testArr[index].type === 'judge' || this.testArr[index].type === 'one' || this.testArr[index].type === 'indefinite') {
            answerArr.push({
              qid: this.testArr[index].qid,
              select: this.testArr[index].oldSelect.join(','),
              type: this.testArr[index].type
            })
          } else {
            answerArr.push({
              qid: this.testArr[index].qid,
              type: this.testArr[index].type
            })
          }
        }
      }
      // 把历史记录写入本地请求
      localStorage.setItem(this.selectId, JSON.stringify(historyArr))
      // console.log(keyStr)
      this.$http.mark({
        phone: localStorage.getItem('mobile'),
        answer: JSON.stringify(answerArr),
        sign: signStr,
        cid: this.selectId
      }).then((res) => {
        // console.log(res)
        this.dialogData = res.data.data
        this.dialogVisible = true
      }).catch((err) => {
        console.log(err)
      })
    },
    // 跳转全部解析
    jump_allAnalysis () {
      this.$router.push({ path: '/analysis?selectId=' + this.selectId })
    },
    // 跳转错题解析
    jump_analysis_err () {
      this.$router.push({ path: '/analysis?selectId=' + this.selectId + '&err=true' })
    },
    // 搜索试卷
    search_test () {
      if (this.searchStr) {
        this.$http.subjectSearch({
          phone: localStorage.getItem('mobile'),
          keyword: this.searchStr
        }).then((res) => {
          console.log(res)
          if (res.data.data.length !== 0) {
            this.searchTableData = res.data.data
          } else {
            this.$message({
              message: '搜索不到该题目',
              type: 'warning'
            })
          }
        }).catch((err) => {
          console.log(err)
        })
      } else {
        this.$message({
          message: '请输入搜索内容',
          type: 'warning'
        })
      }
    },
    // 搜索出来的表格改变时的方法
    searchCurrentChange (val) {
      console.log(val)
      this.searchTest = val
    },
    // 打开试题
    jump_search () {
      this.$http.special({
        phone: localStorage.getItem('mobile')
      }).then((res) => {
        console.log(res)
        if (this.searchTest.pid === Number(res.data.data.linian.gid)) {
          this.$router.push({ path: '/calendar' })
          this.$store.state.ccid = this.searchTest.cid
          this.$store.state.qqid = this.searchTest.qid
          this.$store.state.params = false
        } else if (this.searchTest.pid === Number(res.data.data.moni.gid)) {
          this.$router.push({ path: '/simulation' })
          this.$store.state.ccid = this.searchTest.cid
          this.$store.state.qqid = this.searchTest.qid
          this.$store.state.params = false
        } else {
          this.$router.push({ path: `/practise` })
          this.$store.state.ppid = this.searchTest.pid
          this.$store.state.ccid = this.searchTest.cid
          this.$store.state.qqid = this.searchTest.qid
        }
        this.reload()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 清空在本地保存的做题历史纪录
    clear_local () {
      // console.log(this.selectId)
      localStorage.removeItem(this.selectId)
      this.reload()
    }
  }
}

</script>
<style lang='less'>
#AnswerView {
  // overflow: hidden;
  height: calc(100% - 108px);
  // 左边导航
  .AnswerView-nav {
    float: left;
    width: calc(22% - 54px);
    background: #f5f5f5;
    // height: 100%;
    height: calc(100% - 30px);
    padding: 30px 0 0 54px;
    text-align: left;
    overflow: auto;
    .AnswerView-btn {
      button {
        padding: 5px 10px;
        background: #f5f5f5;
        border: 1px solid rgba(217, 217, 217, 1);
        border-radius: 10px;
        color: #333333;
      }
    }
    .AnswerView-title {
      color: #333333;
      .AnswerView-title-box {
        font-size: 16px;
        font-weight: bold;
        margin: 20px 0;
      }
      .el-tree {
        background: none;
        .el-tree-node {
          .el-tree-node__content {
            .span-ellipsis {
              font-size: 14px;
              font-weight: bold;
              width: calc(100% - 24px);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .el-tree-node__children {
            .el-tree-node {
              .el-tree-node__content {
                .el-tree-node__expand-icon::before {
                  display: none;
                }
                .el-tree-node__label {
                  width: 100%;
                  font-weight: normal;
                }
              }
            }
          }
        }
      }
    }
  }
  // 右边内容
  .AnswerView-content {
    float: left;
    width: calc(78% - 81px);
    height: calc(100% - 20px);
    background: white;
    border-left: 1px solid #e5e5e5;
    text-align: left;
    padding: 20px 40px 0;
    font-size: 14px;
    .AnswerView-content-btn {
      margin-bottom: 20px;
      button {
        border: none;
        padding: 8px 10px;
        color: white;
      }
      .AnswerView-btn1 {
        background: url("../assets/img/hand_btn.png");
        background-size: 100% 100%;
        margin-right: 20px;
      }
      .AnswerView-btn2 {
        background: url("../assets/img/err_btn.png");
        background-size: 100% 100%;
      }
      p {
        float: right;
        color: #ff0000;
        line-height: 30px;
        span {
          margin-right: 40px;
        }
      }
    }
    .AnswerView-ti-block {
      height: 65%;
      overflow: auto;
      .ti-block-content {
        p {
          padding: 10px 0;
        }
        .ti-block-content-img {
          width: 100%;
          img {
            max-width: 100%;
          }
        }
      }
      .ti-block-sel {
        margin: 20px 0;
        .el-radio {
          margin: 0 0 0 50px;
        }
        .el-checkbox-group {
          display: inline-block;
          margin: 0 0 0 50px;
        }
      }
      .ti-block-action {
        margin-bottom: 20px;
        button {
          padding: 5px 10px;
          background: white;
          border: 1px solid rgba(217, 217, 217, 1);
          border-radius: 10px;
          color: #333333;
          margin-right: 20px;
        }
        button:hover {
          background: #6bb8f6;
          color: white;
        }
      }
      .ti-block-answer {
        .answer {
          p {
            margin: 10px 0;
          }
        }
        .answer-img {
          width: 100%;
          img {
            max-width: 100%;
          }
        }
        .comment {
          .comment-item {
            margin: 20px;
            line-height: 20px;
            position: relative;
            overflow: hidden;
            img {
              width: 40px;
              height: 40px;
              float: left;
              margin-right: 15px;
              // vertical-align: middle;
            }
            div {
              float: left;
              span {
                color: #999999;
                font-size: 12px;
              }
            }
            .comment-item-date {
              float: right;
              color: #999999;
              font-size: 12px;
            }
          }
        }
      }
    }
    .AnswerView-ti-num {
      margin: 10px 0;
      button {
        border: none;
        padding: 10px 20px;
        margin-right: 15px;
      }
      .btn1 {
        background: url("../assets/img/trial.png") no-repeat;
        background-size: 100% 100%;
        color: #999999;
      }
      .btn2 {
        background: url("../assets/img/pay.png") no-repeat;
        background-size: 100% 100%;
        color: white;
      }
      span {
        font-size: 14px;
        margin: 20px;
        position: relative;
      }
      .red:after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        background: #ff0000;
        top: 3px;
        left: -15px;
      }
      .green:after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        background: #00db0f;
        top: 3px;
        left: -15px;
      }
    }
    .AnswerView-ti-span {
      height: 15%;
      overflow: auto;
      span {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #999999;
        background: #d9d9d9;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
      }
      .red-bg {
        background: #ff0000;
        color: white;
      }
      .green-bg {
        background: #00db0f;
        color: white;
      }
      .border {
        border: 1px solid blue;
      }
    }
  }

  .el-dialog__wrapper {
    .el-dialog {
      border-radius: 10px;
      .el-dialog__header {
        text-align: left !important;
        .el-dialog__title {
          font-size: 14px;
        }
        .el-dialog__headerbtn {
          background: #ff0000;
          border-radius: 50%;
          width: 16px;
          height: 16px;
          .el-icon-close {
            color: white;
            line-height: 16px;
          }
        }
      }
      .el-dialog__body {
        padding: 0 20px;
        text-align: center;
        .dialog-title {
          font-size: 24px;
        }
        .dialog-grade {
          p {
            display: inline-block;
            width: 50%;
            margin: 30px 0 20px;
          }
        }
        .dislog-num {
          margin: 15px;
          p {
            display: inline-block;
            width: 33.33%;
          }
        }
        .dislog-btn {
          padding: 20px 0;
          button {
            border: none;
            padding: 8px 10px;
            color: white;
            margin: 0 40px;
          }
          & > button:first-child {
            background: url("../assets/img/hand_btn.png");
            background-size: 100% 100%;
          }
          & > button:last-child {
            background: url("../assets/img/err_btn.png");
            background-size: 100% 100%;
          }
        }
        .el-select {
          display: block;
        }
        .aaa {
          margin-bottom: 0;
        }
        .historyBtn {
          padding: 20px 0;
          button {
            padding: 5px 10px;
            margin: 0 15px;
            border: none;
            color: white;
          }
          .btn1 {
            background: url("../assets/img/hand_btn.png");
            background-size: 100% 100%;
          }
          .btn2 {
            background: url("../assets/img/history.png");
            background-size: 100% 100%;
          }
          .btn3 {
            background: url("../assets/img/err_btn.png");
            background-size: 100% 100%;
          }
        }
      }
      .el-dialog__footer {
        .dialog-footer {
          .el-button {
            padding: 8px 20px;
          }
        }
      }
    }
  }
  // 历史纪录弹窗
  .history_box {
    .el-dialog {
      .el-dialog__header {
        text-align: center !important;
        .el-dialog__headerbtn {
          display: none;
        }
      }
    }
  }
  // 试题搜索弹窗
  .search-box {
    .el-dialog {
      margin-top: 25vh!important;
      .el-dialog__header {
        background: #64b5f6;
        border-radius: 10px 10px 0 0;
        .el-dialog__title {
          font-size: 18px;
          color: white;
        }
        .el-dialog__headerbtn {
          display: none;
        }
      }
      .el-dialog__body {
        text-align: left;
        .search-sou {
          padding: 20px 0 30px;
          input {
            width: 55%;
            border-radius: 10px;
            border: none;
            background: #f5f5f5;
            padding: 10px;
            margin-right: 20px;
          }
          button {
            padding: 8px 15px;
            border-radius: 10px;
            border: none;
            color: white;
            background: #64b5f6;
          }
        }
        .search-table {
          .el-table {
            border-radius: 5px;
            .el-table__header-wrapper {
              .el-table__header {
                .has-gutter {
                  tr {
                    background: #c4e5ff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
